var painting = false;
var brushColour = "#ff0";
var prevX = '';
var prevY = '';
var brushSize = 10;
var dataArray = new Array();
var saved_image = false;
var canvasX = 500;
var canvasY = 500;

$(document).ready(function(){
    //set the brush size at the start
    $("#brush_size").html(brushSize);
    $('#brush_size').attr('style', 'background-color:'+brushColour);
    if($.browser.ie){
        $("#eisel").attr('UNSELECTABLE', 'on');
    }
    var paper = Raphael("canvas", canvasX, canvasY);
    $("#canvas").mousemove(function(e){
        if(painting){
            var circle = '';
            var string = '';
            $("#canvas").disableTextSelect();
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            if(prevX && prevY){
                string = '.path({ "stroke-width": '+brushSize+', stroke: "'+brushColour+'", "stroke-linecap": "round"}).moveTo('+prevX+', '+prevY+').lineTo('+mouseX+','+mouseY+');';
            } else {
                string = '.circle('+mouseX+','+mouseY+','+brushSize/2+'); circle.attr("fill", "'+brushColour+'"); circle.attr("stroke", "'+brushColour+'");';
            }
            eval('circle = paper'+string);
            prevX = mouseX;
            prevY = mouseY;
            dataArray.push(string);
        }
    });
    $("#canvas").mousedown(function(){
        painting=true;
    });
    $("#canvas").mouseup(function(){
        painting=false;
        prevX = false;
        prevY = false;
        $("#canvas").enableTextSelect();
    });
    $("#clear").click(function(){
        $("#clear").html("Please wait").attr('disabled','disabled');
        $("#canvas > svg").remove();
        paper = Raphael("canvas", 320, 200);
        $("#clear").html("Clear").attr('disabled','');
        dataArray = new Array();
    });
    $("#bigger_brush").click(function(){
        if(brushSize < 30){
            brushSize = brushSize + 5;
            $("#brush_size").html(brushSize);
        }
    });
    $("#smaller_brush").click(function(){
        if(brushSize > 5){
            brushSize = brushSize - 5;
            $("#brush_size").html(brushSize);
        }
    });
    $(".colour").click(function(){
        var newColour = $(this)
        brushColour = newColour.attr("title");
        $('.current_colour').removeClass('current_colour');
        newColour.addClass('current_colour');
        $('#brush_size').attr('style', 'background-color:'+brushColour);
    });
    $('#submit').click(function(){
        saved_image = true;
        renderSavedSVG();
    });

    $(window).scroll(function () {
        if(saved_image){
            renderSavedSVG();
        }
    });

    function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
          && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
    }

    function renderSavedSVG(){
        $('.saved_canvas').each(function(){
            var image = $(this);
            if(isScrolledIntoView(image)){
                var raphId = image.attr('id');
                //alas... raphael needs an id... maybe we can change this...
                //TODO: Make raphael understand elements
                var saved_paper = Raphael(raphId, canvasX, canvasY);
                for(i in dataArray){
                    eval('circle = saved_paper'+dataArray[i]);
                }
                image.removeClass('saved_canvas').addClass('visible_canvas');
            }
        });
    }

	$('#reset').click(function(){
		$('#reset').html('Resetting');
		$('.visible_canvas > svg').each(function(){
			$(this).remove();
			$(this).parent().removeClass('visible_canvas').addClass('saved_canvas');
		});
		$('#reset').html('Reset');
	});

});